<template>
  <!-- 商品分类 -->
  <div>
    <div class="maxBox">
      <!-- 标题组件 -->
      <panel title="商品分类">
        <el-button type="primary" slot="btn" @click="isShow = true"
          >添加分类</el-button
        >

        <!-- 表格内容 -->
        <div class="content">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号"> </el-table-column>
            <el-table-column prop="cateName" label="分类名称">

              <template slot-scope="scope">
                <!-- 默认有两个html 静态文本  input -->
                <span v-if="scope.row.flag === false">{{
                  scope.row.cateName
                }}</span>
                <el-input
                  v-else
                  type="text"
                  v-model="scope.row.cateName"
                  size="mini"
                >
                </el-input>
              </template>
            </el-table-column>

            <!-- Switch开关 -->
            <el-table-column label="是否启用">
              <template slot-scope="scope">
                <el-switch
                  :disabled="!scope.row.flag"
                  v-model="scope.row.state"
                  active-color="#13ce66"
                  inactive-color="#ddd"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </template>
            </el-table-column>

            <!-- 编辑 完成 删除按钮 -->
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  v-if="scope.row.flag === false"
                  @click="scope.row.flag = true"
                  >编辑</el-button
                >
                <el-button
                  v-else
                  type="success"
                  size="small"
                  @click="saveBtn(scope.row)"
                  >完成</el-button
                >
                <el-button
                  size="small"
                  type="danger"
                  @click="delType(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </panel>

      <!-- 添加分类 弹窗 -->
      <el-dialog title="添加分类" :visible.sync="isShow">
        <el-form :model="formData">
          <el-form-item label="分类名称">
            <el-input v-model="formData.cateName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch
              v-model="formData.state"
              active-color="#13ce66"
              inactive-color="#ddd"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isShow = false">取 消</el-button>
          <el-button type="primary" @click="addBtn()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 导入公共标题组件
import Panel from "../../components/Panel.vue";
import { cateList, createEdit, typeDel, addType } from "@/api/goods.js";

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 0,
      pageSize: 5,

      // 是否显示弹窗 默认不显示
      isShow: false,

      // form表单数据
       formData: {
        cateName: "",
        state: 0,
      },
    };
  },
  // 注册组件
  components: {
    Panel,
  },

  methods: {
    //点击完成按钮
    async saveBtn(data) {
      //接口请求 修改数据
      let res = await createEdit(data);
      console.log(res);
      data.flag = false;
    },
    //每一页数据条数的改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getCateData();
    },
    //当前页码改变
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getCateData();
    },
    //请求分类的列表数据
    async getCateData() {
      let data = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      // 请求接口
      let res = await cateList(data);
      this.total = res.data.total;
      let arr = res.data.data;
      this.tableData = arr.map((item) => {
        //每行数据都添加了一个默认的flag 状态
        item.flag = false;
        return item;
      });
    },

    // 删除分类按钮------------------------------------------------
    delType(id) {
      //传ID
      this.$confirm("是否确认删除该分类 ？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await typeDel({ id });
          if (res.data.code === 0) {
            //成功删除后 重新请求列表
            this.getCateData();
            console.log("被删分类ID：" + res.config.params.id);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击添加分类按钮
    async addBtn () {
      let res = await addType(this.formData);
      console.log(res);
      if (res.data.code === 0) {
        //关闭 弹窗
        this.isShow = false;
        //清空数据
        this.formData.cateName = '';
        this.formData.state = 0;
        //重新拉获取列表数据
        this.getCateData()

      }
    },
  },

  created() {
    // 进入页面请求分类列表函数
    this.getCateData();
  },
};
</script>

<style lang="less" scoped>
.maxBox {
  width: 100%;
  height: 100%;
}
</style>